<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" class="handle-del mr10" @click="added">角色新增</el-button>
            </div>
            <el-table
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    v-loading="loading"
                    header-cell-class-name="table-header">
                <el-table-column prop="name" label="角色名称" align="center"></el-table-column>
                <el-table-column prop="remark" label="角色描述" align="center"></el-table-column>
                <el-table-column prop="add_time" label="创建时间" align="center"></el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button type="text" icon="el-icon-delete" class="red"
                                   @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
                :title="type?'新增角色':'修改角色'"
                :visible.sync="AddAuth"
                width="90%"
                :close-on-click-modal="false"
        >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input type="textarea" v-model="form.remark"></el-input>
                </el-form-item>
                <div style="height: 45vh;overflow-y: scroll;">
                    <el-form-item label="权限配置">
                        <div v-for="(item,index) in authority" :key="index" @click="active=index">
                            <el-checkbox v-model="item.checkAll" @change="C1(item.checkAll)" ref="assemble">
                                {{ item.title }}
                            </el-checkbox>
                            <div style="margin-left: 20px">
                                <el-checkbox-group v-model="checkedCities" @change="C2">
                                    <el-checkbox v-for="(ktem,kndex) in item.child" :label="ktem.id" :key="kndex"
                                                 @change="C3(kndex,index)">{{ ktem.title }}
                                    </el-checkbox>
                                </el-checkbox-group>
                            </div>
                        </div>
                    </el-form-item>
                </div>
                <el-form-item style="margin-top: 20px">
                    <el-button type="primary" @click="onSubmit">{{ type ? '立即创建' : '立即修改' }}</el-button>
                    <el-button @click="cancellation">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
import {
    Loading
} from 'element-ui';
import AxiosPost from '../api/index'

export default {
    name: 'AuthList',
    data() {
        return {
            active: null,
            checkedCities: [],
            checkAll: false,
            type: false,
            AddAuth: false,
            loading: true,
            tableData: [],
            authority: [{checkAll: false}],
            form: {
                id: '',
                name: '',
                remark: '',
            },
        };
    },
    created() {
        this.getData();

    },
    methods: {
        added() {
            this.checkedCities = []

            this.form.id = '';
            this.form.name = '';
            this.form.remark = '';
            this.authlistbygroupid()
            this.type = true
            this.AddAuth = true
        },
        async getData() {
            this.loading = true
            let info = await AxiosPost('/admin/user_group/groupauthlistall')
            if (info.code !== 10000) {
                this.$message.error(info.message)
                return false
            }
            this.loading = false
            info.data.forEach(item => {
                item.add_time = this.$moment(item.add_time * 1000).format('YYYY-MM-DD HH:mm:ss')
            })
            this.tableData = info.data
        },
        async authlistbygroupid() {
            let info = await AxiosPost('/admin/user_group/authlistbygroupid')
            if (info.code !== 10000) {
                this.$message.error(info.message)
                return false
            }
            this.authority = info.data
            this.authority.forEach(item => {
                item.checkAll = false
                item.checkNum = []
                item.checkhave = []
                item.child.forEach(ktem => {
                    item.checkNum.push(ktem.id)
                    ktem.checkBox = false
                })
            })
        },
        C1(val) {
            console.log(val);
            if (val) {
                this.authority[this.active].child.forEach(item => {
                    item.checkBox = true
                })
                this.authority[this.active].child.forEach(item => {
                    this.authority[this.active].checkhave.push(item.id)
                })
            } else {
                this.checkedCities = []
                this.authority[this.active].child.forEach(item => {
                    item.checkBox = false
                })
                this.authority[this.active].checkhave = []
            }
            this.authority.forEach(item => {
                item.child.forEach(oiem => {
                    if (oiem.checkBox) {
                        this.checkedCities.push(oiem.id)
                    }
                })
            })
        },
        C2(value) {
            // console.log(value);
            // console.log(this.authority[this.active].checkAll = true,'c2');
        },
        C3(value, index) {
            this.authority[this.active].child[value].checkBox = !this.authority[this.active].child[value].checkBox
            if (this.authority[this.active].checkhave.indexOf(this.authority[this.active].child[value].id) === -1) {
                this.authority[this.active].checkhave.push(this.authority[this.active].child[value].id)
                this.authority[this.active].checkhave = [...new Set(this.authority[this.active].checkhave)]
                this.authority[this.active].checkAll = this.authority[this.active].checkhave.length === this.authority[this.active].checkNum.length
            } else {
                this.authority[this.active].checkhave.splice(this.authority[this.active].checkhave.indexOf(this.authority[this.active].child[value].id), 1)
                this.authority[this.active].checkhave = [...new Set(this.authority[this.active].checkhave)]
                this.authority[this.active].checkAll = this.authority[this.active].checkhave.length === this.authority[this.active].checkNum.length
            }
            console.log(this.active, '当前位置');
            console.log(this.authority[this.active].checkhave, '当前容器');
            console.log(this.authority[this.active].checkNum, '总容器');
            this.active = index
        },
        cancellation() {
            this.AddAuth = false
        },
        isInclude(arr1, arr2) {
            return arr2.every((val) => arr1.includes(val))
        },
        async onSubmit() {
            if (!this.form.name) {
                this.$message.error("请输入角色名称");
                return false;
            }
            if (!this.form.remark) {
                this.$message.error("请输入角色描述");
                return false;
            }
            const loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            this.form.rule = this.checkedCities.join(','); //数组转字符串
            let info;
            if (this.type) {
                info = await AxiosPost('/admin/user_group/addgroup', {
                    name: this.form.name,
                    rule: this.form.rule,
                    remark: this.form.remark
                })

            } else {
                info = await AxiosPost('/admin/user_group/update', {
                    id: this.form.id,
                    name: this.form.name,
                    rule: this.form.rule,
                    remark: this.form.remark
                })
            }
            loading.close();
            if (info.code !== 10000) {
                this.$message.error(info.message)
                return false
            }
            this.getData();
            this.$message.success(info.message)

            this.AddAuth = false
        },
        // 删除操作
        handleDelete(index, row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(async () => {
                    let info = await AxiosPost('/admin/user_group/delete', {id: row.id})
                    if (info.code !== 10000) {
                        this.$message.error(info.message)
                        return false
                    }
                    this.$message.success(info.message)
                    this.getData();
                })
                .catch(() => {
                });
        },
        // 编辑操作
        handleEdit(index, row) {
            this.checkedCities = []
            let a = row.rule.split(',')
            a.forEach(item => {
                this.checkedCities.push(parseInt(item))
            })
            this.form.id = row.id;
            this.form.name = row.name;
            this.form.remark = row.remark;
            this.authlistbygroupid()
            this.type = false
            this.AddAuth = true
            console.log(this.form);
        },
    }
};
//时间戳转换
</script>

<style>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
